<template>
  <div>
    <!--        面包屑导航-->
    <breadcrumb  :navData="navData"></breadcrumb>
    <!-- card -->
    <el-card class="box-card">
      <header>
        <el-row :gutter="13">
          <el-col :span="10">
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              v-model="user_msg.query"
              clearable
              @clear="getusers_list"
            >
              <el-button slot="append" icon="el-icon-search" @click="getusers_list"></el-button>
            </el-input>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
            </div>
            <!-- 嵌套的表单 -->
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户名：" label-width="120px" prop="username">
                  <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" label-width="120px" prop="password">
                  <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" label-width="120px" prop="email">
                  <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话：" label-width="120px" prop="mobile">
                  <el-input v-model="form.mobile" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add_users">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </header>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="#" width="50" type="index"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="220px"></el-table-column>
        <el-table-column prop="mobile" label="电话" width="150px"></el-table-column>
        <el-table-column prop="role_name" label="角色" width="150px"></el-table-column>
        <el-table-column prop="address" label="状态" width="100px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switc(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180px">
          <!-- template -->
          <template slot-scope="scope">
            <!-- 编辑用户 -->
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <!-- 删除 -->
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
            <!-- 设置 -->
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-s-tools"
              @click="setting(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="user_msg.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="user_msg.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 编辑弹出 -->
      <el-dialog title="编辑用户" :visible.sync="dlg_edit">
        <el-form :model="edit_form">
          <el-form-item label="用户名：" label-width="120px">
            <el-input v-model="edit_form.username" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" label-width="120px">
            <el-input v-model="edit_form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机：" label-width="120px">
            <el-input v-model="edit_form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dlg_edit = false">取 消</el-button>
          <el-button type="primary" @click="add_edit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 权限弹出 -->
      <el-dialog title="分配角色" :visible.sync="dlg_sets">
        <div class="ddd">
          <span>当前的用户:</span>
          <span>{{seting_form.user}}</span>
        </div>
        <div class="ddd">
          <span>当前的角色:</span>
          <span>{{seting_form.role}}</span>
        </div>
        <el-form :model="seting_form" label-width="140px">
          <el-form-item label="分配新角色">
            <el-select placeholder="请选择" v-model="seting_form.region.roleName" @change="selectGet">
              <el-option
                v-for="(item,index) in seting_form.region"
                :key="index"
                :label="item.roleName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="on_setting">确定</el-button>
            <el-button @click="dlg_sets=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "VueShopsUserList",

  data() {
    return {
      navData: ["用户管理", "用户列表"],
      // 输入框
      ipt: "",
      user_msg: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      // 总条数
      total: 0,
      // 列表
      tableData: [],
      // 弹出表单
      dialogFormVisible: false,
      // 弹出修改
      dlg_edit: false,
      // 弹出角色
      dlg_sets: false,
      // form表单
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // form表单验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // 修改表单绑定
      edit_form: {
        username: "",
        email: "",
        mobile: "",
      },
      // 修改获取数据
      edit_s: {},
      id: 0,
      // 权限表单
      seting_form: {
        region: "",
        user: "",
        role: "",
      },
      // 角色ID
      ids: 0,
    };
  },

  mounted() {},
  created() {
    this.getusers_list();
    // let i = 999;
    // let time = setInterval(() => {
    //   i--;
    //   if (i === 0) clearInterval(time);
    //   this.form.username = "00000000" + i;
    //   this.axios.post("/users", this.form).then((res) => {
    //     console.log(res.data.meta);
    //   });
    // }, 1000);
  },

  methods: {
    // 表格数据
    async getusers_list() {
      const data = await this.axios.get("/users", {
        params: this.user_msg,
      });
      console.log(data.data.data);
      this.tableData = data.data.data.users;
      this.total = data.data.data.total;
    },
    // 每页几条
    handleSizeChange(val) {
      this.user_msg.pagesize = val;
      this.getusers_list();
    },
    // 哪一页
    handleCurrentChange(val) {
      this.user_msg.pagenum = val;
      this.getusers_list();
    },
    // 表单添加
    add_users() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const lists = await this.axios.post("/users", this.form);
          console.log(lists.data.meta);
          // status: 201
          if (lists.data.meta.status == 201) {
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.getusers_list();
          } else {
            this.$message.error("添加失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 状态
    async switc(row) {
      console.log(row);
      const swit = await this.axios.put(
        `/users/${row.id}/state/${row.mg_state}`
      );
      console.log(swit);
      // meta: {msg: '设置状态成功', status: 200}
      if (swit.data.meta.status == 200) {
        this.$message.success("设置状态成功");
      } else {
        this.$message.error("设置状态失败");
      }
    },
    // 删除
    async del(row) {
      console.log(row);
      const ids = await this.axios.delete(`users/${row.id}`);
      console.log(ids);
      // meta: msg: "删除成功";status: 200;
      if (ids.data.meta.status == 200) {
        this.$message.success("删除成功");
        this.getusers_list();
      } else {
        this.$message.error("失败");
      }
    },
    // 编辑用户弹出
    async edit(row) {
      this.dlg_edit = true;
      this.id = row.id;
      this.edit_form.username = row.username;
      const edits = await this.axios.get(`users/${row.id}`);
      this.edit_s = edits.data.data;
      console.log(this.edit_s);
      this.edit_form.email = this.edit_s.email;
      this.edit_form.mobile = this.edit_s.mobile;
    },
    // 编辑确定
    async add_edit() {
      const edits = await this.axios.put(`users/${this.id}`, {
        email: this.edit_form.email,
        mobile: this.edit_form.mobile,
      });
      console.log(edits);
      if (edits.data.meta.status == 200) {
        this.$message.success("修改成功");
        this.dlg_edit = false;
        this.getusers_list();
      } else {
        this.$message.error("修改失败");
      }
    },
    // 权限按钮
    async setting(row) {
      this.id = row.id;
      this.dlg_sets = true;
      this.seting_form.user = row.username;
      this.seting_form.role = row.role_name;
      const sett = await this.axios.get("roles");
      console.log(sett);
      this.seting_form.region = sett.data.data;
      console.log(sett.data.data);
    },
    // 角色ID
    selectGet(e) {
      this.ids = e;
      console.log(this.ids);
    },
    // 权限确定
    async on_setting() {
      const se = await this.axios.put("users/" + this.id + "/role", {
        rid: this.ids,
      });
      console.log(se);
      if (se.data.meta.status == 200) {
        this.$message.success("角色修改成功");
        this.dlg_sets = false;
        this.getusers_list();
      } else {
        this.$message.error("角色修改失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
  .ddd {
    width: 340px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    span {
      width: 100%;
    }
  }
}
header {
  width: 100%;
  height: 60px;
  .el-row {
    height: 100%;
  }
}
</style>